<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts的基本使用</title>
    <!-- 导入echarts -->
    <script src="echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .echarts {
            width: 800px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>

    <!-- 拿一个容器来放echarts -->
    <div class="echarts"></div>

    <!-- 

    本节内容 使用  dataset 来设置数据源 
 dataset: {
            // 数据源 当设置了这个之后我们要给每个图标设置对应的数据 
            /* 
            给每个图标设置一个 encode {y:1} 代表使用的data中索引值为1的数据
            */
            source: data
        },
        给柱状图设置数据 
        encode:{
            y:1 代表使用数组中的第一个值
        }
        饼图比较特殊 他有文字和数据吗
        encode:{
            itemName:3 文字
            value:4    数据
        }
 -->
</body>

</html>

<script>
    // 获取容器
    let dom = document.querySelector('.echarts')
    // 初始化 echarts echats.init(dom)
    let myEcharts = echarts.init(dom)
    console.log(echarts);
    // 我们可以看到 如果数据多的话 不好做 那么我们可以把数据独立出来 是一个二维数组
    let data = [
        ["衬衫", 10, 10, '衬衫1', 10],
        ["羊毛衫", 20, 20, '羊毛衫1', 20],
        ["雪纺衫", 40, 40, '雪纺衫1', 40],
        ["裤子", 25, 25, '裤子1', 25],
        ["高跟鞋", 8, 8, '高跟鞋1', 8],
        ["袜子", 12, 12, '袜子1', 12],
    ]
    // 指定图表的配置项和数据
    myEcharts.setOption({
        // 设置字符集
        dataset: {
            // 数据源 当设置了这个之后我们要给每个图标设置对应的数据 
            /* 
            给每个图标设置一个 encode {y:1} 代表使用的data中索引值为1的数据
            */
            source: data
        },
        title: {
            // 标题
            text: 'echarts入门',
            // 设置他的位置
            left: 'center',
            // 跳转连接
            link: "http://www.baidu.com",
            // 标题颜色
            textStyle: {
                color: 'red'
            }
        },
        // 设置x轴
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        // 设置y轴
        yAxis: {
            // 显示刻度
            axisTick: {
                show: true

            },
            // 显示线体
            axisLine: {
                show: true

            }
        },
        // 系列的设置：绘制什么样的图表，数据的展示
        series: [

            // 柱状图
            {
                // 图表的类型设计 bar柱状图 line折线图 pie饼图
                type: 'bar',
                // 图形颜色
                color: "skyblue",
                encode: {
                    y: 1
                }
            },
            // 折线图
            {
                // 图表的类型设计 bar柱状图 line折线图 pie饼图
                type: 'line',
                // 图标的数据
                // data: [10, 20, 40, 25, 8, 12],
                // 图形颜色
                color: "red",
                encode: {
                    y: 2
                }
            },
            // 斌图
            {
                // 图表的类型设计 bar柱状图 line折线图 pie饼图
                type: 'pie',
                // 图标的数据 如果要显示文字和数据 必须参考下面写法

                // 设置宽度和高度
                width: 280,
                height: 180,
                // 设置位置
                top: 20,
                left: 520,
                // 如果是文字显示不全 那就是超出隐藏了 可以把半径设置小一点
                radius: 40,
                encode: {
                    // 饼图的文字
                    itemName: 3,
                    value: 4
                }
            }
        ]
    })
</script>